<template>
    <view class="content">
        <view class="input-group">
            <view class="input-row border">
                <text class="title">账号：</text>
                <m-input class="m-input" type="text" clearable focus v-model="account" placeholder="请输入账号"></m-input>
            </view>
            <view class="input-row">
                <text class="title">密码：</text>
                <m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
            </view>
        </view>
        <view class="btn-row">
            <button type="primary" class="primary" @tap="bindLogin">登录</button>
        </view>
        <view class="action-row">
            <navigator url="/pages/company/com/center" redirect>注册账号</navigator>
            <text>|</text>
            <navigator url="../pwd/pwd">忘记密码</navigator>
			
			<div>
			<button @click="getUser()"> 获取用户信息</button>
			<button @click="loginOut()"> 登出</button>
			<button  url="/pages/company/com/center" redirect> 测试</button>
			</div>
        </view>
        <view class="oauth-row" v-if="hasProvider" v-bind:style="{top: positionTop + 'px'}">
            <view class="oauth-image" v-for="provider in providerList" :key="provider.value">
                <image :src="provider.image" @tap="oauth(provider.value)"></image>
            </view>
        </view>
    </view>
</template>

<script>
    import service from '../../service.js';
    import {
        mapState,
        mapMutations
    } from 'vuex'
    import mInput from '../../components/m-input.vue'

    export default {
        components: {
            mInput
        },
        data() {
            return {
                providerList: [],
                hasProvider: false,
                account: '',
                password: '',
                positionTop: 0
            }
        },
        computed: mapState(['forcedLogin']),
        methods: {
            ...mapMutations(['login']),
            initProvider() {
                const filters = ['weixin', 'qq', 'sinaweibo'];
                uni.getProvider({
                    service: 'oauth',
                    success: (res) => {
                        if (res.provider && res.provider.length) {
                            for (let i = 0; i < res.provider.length; i++) {
                                if (~filters.indexOf(res.provider[i])) {
                                    this.providerList.push({
                                        value: res.provider[i],
                                        image: '../../static/img/' + res.provider[i] + '.png'
                                    });
                                }
                            }
                            this.hasProvider = true;
                        }
                    },
                    fail: (err) => {
                        console.error('获取服务供应商失败：' + JSON.stringify(err));
                    }
                });
            },
            initPosition() {
                /**
                 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
                 * 反向使用 top 进行定位，可以避免此问题。
                 */
                this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
            },
			loginOut(){
				 var value = wx.getStorageSync('token')
				this.$http.post('api/wx/loginOut',{token:value}, {
					params: {}, /* 会加在url上 */
					header: {}, /* 会覆盖全局header */
					dataType: 'json',
					responseType: 'text'
				}).then(res => {
					if(res.status!=200){
						uni.showToast({
						        icon: 'none',
						        title: res.msg,
						    });
					}else{
						
					}
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			getUser(){
				 var value = wx.getStorageSync('token')
				 this.$http.post('api/wx/getUser',{token:value}, {
				 	params: {}, /* 会加在url上 */
				 	header: {}, /* 会覆盖全局header */
				 	dataType: 'json',
				 	responseType: 'text'
				 }).then(res => {
				 	if(res.status!=200){
				 		uni.showToast({
				 		        icon: 'none',
				 		        title: res.msg,
				 		    });
				 	}else{
				 		 
				 
				 		uni.showToast({
				 		        icon: 'none',
				 		        title: "获取成功!",
				 		    });
				 	}
				 	console.log(res)
				 }).catch(err => {
				 	console.log(err)
				 })

				
			},
            bindLogin() {
                /**
                 * 客户端对账号信息进行一些必要的校验。
                 * 实际开发中，根据业务需要进行处理，这里仅做示例。
                 */
				
                if (this.account.length < 5) {
                    uni.showToast({
                        icon: 'none',
                        title: '账号最短为 5 个字符'
                    });
                    return;
                }
                if (this.password.length < 6) {
                    uni.showToast({
                        icon: 'none',
                        title: '密码最短为 6 个字符'
                    });
                    return;
                }
                /**
                 * 下面简单模拟下服务端的处理
                 * 检测用户账号密码是否在已注册的用户列表中
                 * 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
                 */
                const data = {
                    username: this.account,
                    password: this.password,
					autoLogin:1
                };
                
				this.$http.post('api/v1/test',data, {
					params: {}, /* 会加在url上 */
					header: {}, /* 会覆盖全局header */
					dataType: 'json',
					responseType: 'text'
				}).then(res => {
					if(res.status!=200){
						uni.showToast({
						        icon: 'none',
						        title: res.msg,
						    });
					}else{
						 wx.setStorageSync('token', res.data)

						uni.showToast({
						        icon: 'none',
						        title: "登陆成功!",
						    });
					}
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
				
                // if (validUser) {
                //     this.toMain(this.account);
                // } else {
                //     uni.showToast({
                //         icon: 'none',
                //         title: '用户账号或密码不正确',
                //     });
                // }
            },
			test(){
				
				
				// uni.navigateTo({
				//     url: '../company/com/center'
				// });
				wx.navigateTo({
				  url: "/pages/company/com/center"
				})
			},
            oauth(value) {
                uni.login({
                    provider: value,
                    success: (res) => {
                        uni.getUserInfo({
                            provider: value,
                            success: (infoRes) => {
                                /**
                                 * 实际开发中，获取用户信息后，需要将信息上报至服务端。
                                 * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
                                 */
                                this.toMain(infoRes.userInfo.nickName);
                            }
                        });
                    },
                    fail: (err) => {
                        console.error('授权登录失败：' + JSON.stringify(err));
                    }
                });
            },
            toMain(userName) {
                this.login(userName);
                /**
                 * 强制登录时使用reLaunch方式跳转过来
                 * 返回首页也使用reLaunch方式
                 */
                if (this.forcedLogin) {
                    uni.reLaunch({
                        url: '../main/main',
                    });
                } else {
                    uni.navigateBack();
                }

            }
        },
        onReady() {
			console.log(this.wodetian());
			this.$http.post('api/wx/loginOut',{name:123}, {
				params: {}, /* 会加在url上 */
				header: {}, /* 会覆盖全局header */
				dataType: 'json',
				responseType: 'text'
			}).then(res => {
				if(res.status!=200){
					uni.showToast({
					        icon: 'none',
					        title: res.msg,
					    });
				}else{
					
				}
				console.log(res)
			}).catch(err => {
				console.log(err)
			})

            this.initPosition();
            this.initProvider();
        }
    }
</script>

<style>
    .action-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .action-row navigator {
        color: #007aff;
        padding: 0 10px;
    }

    .oauth-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .oauth-image {
        width: 50px;
        height: 50px;
        border: 1px solid #dddddd;
        border-radius: 50px;
        margin: 0 20px;
        background-color: #ffffff;
    }

    .oauth-image image {
        width: 30px;
        height: 30px;
        margin: 10px;
    }
</style>
